<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/root.css">
  <link rel="stylesheet" href="../../css/grid.css">
  <script src="../../../libs/d3/d3.v6.js"></script>
  <style>
    rect.bordered {
      stroke: #A1A1A1;
      stroke-width:1px;  
    }

    text.mono {
      font-size: 9pt;
      font-family: Consolas, courier;
      fill: #000;
    }

    text.axis-workweek {
      fill: #000;
    }

    text.axis-worktime {
      fill: #000;
    }
  </style>
  

</head>

<body>
  <header>
    <h1>二维矩阵图</h1>
  </header>
  <main class="container">
    <h2>二维矩阵图</h2>
    <section style="height: 50vh;">
      <div id="matrix" style="height:inherit;width: 100%;"></div>
    </section>
  </main>

  <script type="module">
    import Matrix from './charts/matrix.js'
          d3.csv("./data/relation.csv").then(data =>{
            debugger
            console.log(data)
            new Matrix('matrix', data)
                 .setMargin(50,25,25,25)
                 .setLegendPosition(250,20,-0,-25)
                 .setLegendFontWeight(800)
                 .init()
                 .render()      
          })
  </script>

</body>

</html>